<template>
  <div class="w-64 flex-shrink-0 bg-white border-r border-gray-200">
    <!-- Logo -->
    <div class="flex h-16 items-center justify-center">
      <!-- <img src="@/assets/imges/logo.png" alt="Logo" class="h-8 w-8 mr-2" /> -->
      <span class="text-lg font-semibold">选课系统管理端</span>
    </div>

    <!-- 菜单 -->
    <el-menu
      :default-active="activeMenu"
      background-color="#ffffff"
      text-color="#333333"
      active-text-color="#2468f2"
      unique-opened
      :router="true"
    >
      <template v-for="route in filteredRoutes" :key="route.path">
        <!-- 没有子菜单的情况 -->
        <el-menu-item
          v-if="!route.children || route.children.length === 0"
          :index="route.meta?.path || route.path"
          class="menu-item"
        >
          <el-icon v-if="route.meta?.icon">
            <component :is="route.meta.icon" />
          </el-icon>
          <span>{{ route.meta?.title || route.name }}</span>
        </el-menu-item>

        <!-- 有子菜单的情况 -->
        <el-sub-menu
          v-else
          :index="route.meta?.path || route.path"
          class="submenu-item"
        >
          <template #title>
            <el-icon v-if="route.meta?.icon">
              <component :is="route.meta.icon" />
            </el-icon>
            <span>{{ route.meta?.title || route.name }}</span>
          </template>

          <el-menu-item
            v-for="child in filteredChildren(route.children)"
            :key="child.path"
            :index="child.meta?.path || child.path"
            class="submenu-child-item"
          >
            <el-icon v-if="child.meta?.icon">
              <component :is="child.meta.icon" />
            </el-icon>
            <span>{{ child.meta?.title || child.name }}</span>
          </el-menu-item>
        </el-sub-menu>
      </template>
    </el-menu>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import { useRouteStore } from '@/stores/route'

const route = useRoute()
const routeStore = useRouteStore()

// 从routeStore中获取菜单项
const filteredRoutes = computed(() => {
  // 检查dynamicRoutes中是否有路由
  if (routeStore.dynamicRoutes.length === 0) {
    console.log('没有动态路由数据')
    return []
  }

  // 查找主布局路由（路径为'/'的路由）
  const mainRoute = routeStore.dynamicRoutes.find((route) => route.path === '/')

  // 如果没有找到主路由或主路由没有子路由，返回空数组
  if (!mainRoute || !mainRoute.children || mainRoute.children.length === 0) {
    console.log('没有找到主路由或主路由没有子路由', mainRoute)
    return []
  }

  // 过滤和处理路由
  return mainRoute.children
    .filter((item) => item.meta?.isShow !== false)
    .map((item) => ({
      ...item,
      // 确保路径格式正确
      path: item.path.startsWith('/') ? item.path : `/${item.path}`,
    }))
})

// 过滤子路由中 isShow 为 false 的项
const filteredChildren = (children) => {
  if (!children) return []
  return children.filter((child) => child.meta?.isShow !== false)
}

// 当前激活的菜单
const activeMenu = computed(() => {
  // 如果路由有meta.path，则使用meta.path，否则使用当前路径
  return route.meta?.path || route.path
})
</script>

<style scoped>
:deep(.el-menu) {
  border-right: none;
}

:deep(.el-menu-item) {
  height: 50px;
  line-height: 50px;
  margin: 4px 8px;
  border-radius: 4px;
}

:deep(.el-menu-item.is-active) {
  background-color: #ecf5ff !important;
  color: #2468f2 !important;
  font-weight: 500;
}

:deep(.el-menu-item:hover:not(.is-active)) {
  background-color: #f5f7fa !important;
  color: #2468f2 !important;
}

:deep(.el-sub-menu__title) {
  height: 50px;
  line-height: 50px;
  margin: 0 8px;
  border-radius: 4px;

  &:hover {
    background-color: #f5f7fa !important;
  }
}

:deep(.el-sub-menu.is-active) {
  .el-sub-menu__title {
    color: #2468f2 !important;
  }
}

:deep(.el-sub-menu .el-menu-item.is-active) {
  background-color: #ecf5ff !important;
  color: #2468f2 !important;
}

:deep(.el-sub-menu__title) {
  padding-left: 16px !important;
}

:deep(.el-menu-item) {
  padding-left: 16px !important;
}

:deep(.el-sub-menu .el-menu-item) {
  padding-left: 40px !important;
  min-width: auto;
}

:deep(.el-icon) {
  margin-right: 8px;
  font-size: 18px;
}

/* 蓝色立即购买按钮样式 */
.blue-button {
  display: block;
  background-color: #2468f2;
  color: white;
  border-radius: 4px;
  text-align: center;
  padding: 10px 0;
  margin: 16px;
  font-weight: 500;
}
</style>
